<!DOCTYPE html>
<html>
<head>
    {include file="common/meta"}
    <style>
        .login-box .card {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            background: rgba(255,255,255,0.3);
            border-radius: 15px;
        }
        .login-box .login-card-body {
            padding-top: 30px;
        }
        .login-card-body .input-group {
            margin-bottom: 20px;
        }
        .login-card-body .title {
            font-size: 16px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 32px;
        }
        .login-card-body .title .line {
            height: 2px;
            width: 32px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .refresh {
            display: block;
            border-radius: 2px;
            overflow: hidden;
        }
        #canvas{ 
            position:absolute; 
            z-index:1; 
            left:0; 
            top:0; 
            width:100%; 
            height:100%; 
        }
		.login-box{ 
            position:relative; 
            z-index:3;
        }
		.backimg {
            position:absolute;
            z-index:2;
            left:0;
            top:0;
            height:100%;
            width:100%;
            opacity:0.6;
        }
    </style>
</head>
<body class="hold-transition login-page text-sm">
<canvas id="canvas"></canvas>
<div class="backimg" {if $site.backgroundpic!=''}style="background:url({$site.backgroundpic}) no-repeat center; background-size:cover;"{/if}></div>
<div class="login-box">
    <div class="card">
        <div class="card-body login-card-body">
            <div class="login-logo">{if $site.logo!=''}<img src="{$site.logo}" alt="{:lang('Backstage entrance')}" style=" max-width:60%;">{else}<a href="">{:lang('Backstage entrance')}</a>{/if}</div>
            <form action="{:url('/login/index')}" method="post" class="frm-operate" novalidate>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="{:__('Username')}" name="username" autocomplete="off">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-user"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group">
                    <input type="password" class="form-control" name="password" placeholder="{:__('Password')}">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-7">
                        <div class="icheck-primary">
                            <input type="text" class="form-control" placeholder="{:__('Captcha')}" name="captcha" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-5">
                        <a href="#" class="refresh"><img src="{:url('/login/verify')}" style="width: 100%;height: 36px" /></a>
                    </div>
                </div>
                <div class="row" style="margin-top: 32px;margin-bottom: 10px">
                    <div class="col-md-12">
                        <input type="hidden" name="url" value="{$url}">
                        <button type="submit" class="btn btn-primary btn-block btn-submit">{:__('Sign In')}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<p style="color: #86909c;font-size: 13px;position: absolute;bottom: 20px">Copyright {:date('Y',time())} <a href="{:config('cms.app_url')}" style="color: #86909c" target="_blank">{:config('ver.cms_app')}</a> All Rights Reserved</p>

{include file="common/script"}

<script>
    require(['admin','form'], function (admin, Form) {

        $('.refresh').click(function (e) {
            e.preventDefault();
            $(this).find('img').attr('src',"{:url('/login/verify')}?r="+Math.random());
        });

        Form.api.init({
            isValidate:false, // 取消nice验证
            before: function (data) {
                let validate = true;
                $.each(data,function (k,v) {
                    if (v.name=="username" && v.value.length===0) {
                        Layer.msg('{:__("Please enter in username")}', {icon:2,time:500000});
                        validate = false;
                        return false;
                    }
                    if (v.name=="password" && v.value.length===0) {
                        Layer.msg('{:__("Please enter in password")}', {icon:2});
                        validate = false;
                        return false;
                    }
                    if (v.name=="captcha" && v.value.length===0) {
                        Layer.msg('{:__("Please enter the verification code")}', {icon:2});
                        validate = false;
                        return false;
                    }
                });
                if (!validate) {
                    return false;
                }
                return data;
            },
            success: function (data, response) {
                Layer.msg(response.msg,{time:1000, icon:1},function (e) {
                    window.location.replace(data.url); // 跳转
                });
                return false;
            },
            error: function (res) {
                if (res.code==-1001) {
                    $('.refresh').click();
                }
                layer.msg(res.msg, {time:4000, icon:2, offset:"ct"});
                return false;
            }
        });
    });

	var canvas = document.querySelector("#canvas");
	var w, h;
	~~ function setSize() { //定义canvas的宽高，让他跟浏览器的窗口的宽高相同
		window.onresize = arguments.callee;
		w = window.innerWidth;
		h = window.innerHeight;
		canvas.width = w;
		canvas.height = h;
	}();

	var canCon = canvas.getContext("2d"); //建立2d画板
	var arain = []; //新建数组,储存雨滴
	//
	function random(min, max) { //返回最小值到最大值之间的值
		return Math.random() * (max - min) + min;
	}

	function rain() {};
	rain.prototype = {
		init: function() { //变量初始化
			this.x = random(0, w); //在0-w之间生成雨滴
			this.vx = 0.1;
			this.y = h; //起点在下面
			this.vy = random(4, 5);
			this.h = random(0.1 * h, 0.4 * h); //地板高度
			this.r = 1; //雨滴绽放的半径
			this.vr =1;
			this.colos = Math.floor(Math.random() * 1000);
		},
		draw: function() {

			if(this.y > this.h) {
				canCon.beginPath(); //拿起一支笔
				canCon.fillStyle = '#' + this.colos; //笔墨的颜色，随机变化的颜色
				canCon.fillRect(this.x, this.y, 3, 10); //想象画一个雨滴
			} else {
				canCon.beginPath(); //拿起一支笔
				canCon.strokeStyle = '#' + this.colos; //笔墨的颜色
				canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2); //想象画一个圆
				canCon.stroke(); //下笔作画
			}
		},
		move: function() { //重点是判断和初始位置。其他无大变化
			if(this.y > this.h) { //位置判断
				this.y += -this.vy; //从下往上				

			} else {
				if(this.r < 100) { //绽放的大小
					this.r += this.vr;
				} else {
					this.init(); //放完后回归变量原点
				}

			}
			this.draw(); //开始作画

		}
	}

	function createrain(num) {
		for(var i = 0; i < num; i++) {
			setTimeout(function() {
				var raing = new rain(); //创建一滴雨
				raing.init();
				raing.draw();
				arain.push(raing);
			}, 800 * i) //每隔150ms下落一滴雨
		}
	}
	createrain(10); //雨滴数量
	setInterval(function() {
		canCon.fillStyle = "rgba(0,0,0,0.1)"; //拿起一支透明0.13的笔		
		canCon.fillRect(0, 0, w, h); //添加蒙版 控制雨滴长度
		for(var item of arain) {
			//item of arain指的是数组里的每一个元素
			//item in arain指的是数组里的每一个元素的下标（包括圆形连上的可遍历元素）
			item.move(); //运行整个move事件
		}
	}, 1000 / 60); //上升时间
</script>
</body>
</html>